<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">

    <link rel="icon" type="image/png" sizes="16x16" href="../images/logo1/vivid world.jpg">
    <title>Vivid World——参与活动查看</title>

    <link href="../assets/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet">

    <link href="css/style.css" rel="stylesheet">

    <link href="css/colors/default-dark.css" id="theme" rel="stylesheet">
</head>

<body class="fix-header card-no-border fix-sidebar">

    <div class="preloader">
        <div class="loader">
            <div class="loader__figure"></div>
            <p class="loader__label">Vivid World</p>
        </div>
    </div>


    <div id="main-wrapper">

        <header class="topbar">
            <nav class="navbar top-navbar navbar-expand-md navbar-light">
                <!-- Logo -->
                <div class="navbar-header">
                    <a class="navbar-brand" href="index.html">
                        <b>
                            <img src="../images/logo1/vivid world.jpg" style="width: 32px; height: 32px;" alt="homepage"
                                class="dark-logo" />
                        </b>
                        <span>
                            Vivid World——个人中心
                        </span>
                    </a>
                </div>

                <div class="navbar-collapse">
                    <ul class="navbar-nav mr-auto">
                        <li class="nav-item"> <a class="nav-link nav-toggler hidden-md-up waves-effect waves-dark"
                                href="javascript:void(0)"><i class="ti-menu"></i></a> </li>
                    </ul>

                    <ul class="navbar-nav my-lg-0">
                        <!-- Search -->
                        <li class="nav-item hidden-xs-down search-box"> <a
                                class="nav-link hidden-sm-down waves-effect waves-dark" href="javascript:void(0)"><i
                                    class="ti-search"></i></a>
                            <form class="app-search">
                                <input type="text" class="form-control" placeholder="Search & enter"> <a
                                    class="srh-btn"><i class="ti-close"></i></a>
                            </form>
                        </li>

                        <li class="nav-item">
                            <!-- 右侧头像 -->
                            <a class="nav-link waves-effect waves-dark" href="#" id="Head_portrait_right"><img
                                    src="../images/home/touxiang0.png" alt="user" class="profile-pic" /></a>
                        </li>
                    </ul>
                </div>
            </nav>
        </header>

        <!-- End Topbar header -->

        <!-- Left Sidebar 可以在 sidebar.scss  -->

        <aside class="left-sidebar">
            <!-- Sidebar scroll-->
            <div class="scroll-sidebar">
                <!-- Sidebar navigation-->
                <nav class="sidebar-nav">
                    <ul id="sidebarnav">
                        <!-- 导航栏 -->
                        <li> <a class="waves-effect waves-dark"  style="font-size:24px;color:white;" href="personalPage.html" aria-expanded="false"><i
                                    class="mdi mdi-account-check"></i><span class="hide-menu">个人资料</span></a></li>
                        <li> <a class="waves-effect waves-dark" style="font-size:24px;color:white;" href="releaseActivity.html" aria-expanded="false"><i
                                    class="mdi mdi-account-check"></i><span class="hide-menu">发布活动查看</span></a></li>
                        <li> <a class="waves-effect waves-dark" style="font-size:24px;color:white;"href="participateInActivity.html" aria-expanded="false"><i
                                    class="mdi mdi-account-check"></i><span class="hide-menu">参与活动查看</span></a></li>
                        <li> <a class="waves-effect waves-dark" style="font-size:24px;color:white;"href="../../indexAndRegister/index.html" aria-expanded="false"><i
                                    class="mdi mdi-account-check"></i><span class="hide-menu">返回主页</span></a></li>
                    </ul>
                </nav>
            </div>
        </aside>

        <div class="page-wrapper">
            <div class="container-fluid">
                <div class="row page-titles">
                    <div class="col-md-5 align-self-center">
                        <h3 class="text-themecolor">参与过的活动</h3>
                    </div>
                </div>

                <div class="row">
                    <div class="col-lg-12">
                        <div class="card">
                            <div class="card-body">
                                <h4 class="card-title">参与过的活动列表</h4>
                                <h6 class="card-subtitle">Show activity <code>.table</code></h6>
                                <div class="table-responsive">
                                    <table class="table">
                                        <thead>
                                            <tr>
                                                <th>活动标题</th>
                                                <th>活动详情</th>
                                                <th>活动图片</th>
                                                <th>活动地址</th>
                                                <th>活动城市</th>
                                                <th>活动时间</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr v-for="act in userevent_arr">
                                                <td v-text="act.activityTitle"></td>
                                                <td v-text="act.activityDetails"></td>
                                                <td v-text="act.activityImg"></td>
                                                <td v-text="act.activityAddress"></td>
                                                <td v-text="act.activityCity"></td>
                                                <td v-text="act.activityTime"></td>
                                            </tr>
                                        </tbody>
                                    </table>
                                    <!-- 翻页 -->
                                    <div id="page">
                                        <nav aria-label="Page navigation example">
                                            <div class="pagination">
                                                <button class="page-item page-link" href="#"
                                                    @click.prevent="loadEvents(pageInfo.prePage)"
                                                    style="font-size: 30px">
                                                    上一页</button>
                                                <button class="page-item page-link" href="#"
                                                    v-for="n in pageInfo.navigatepageNums"
                                                    @click.prevent="loadEvents(n)"
                                                    v-bind:class="{'bg-secondary lightskyblue':pageInfo.pageNum == n}"
                                                    style="font-size: 30px">
                                                    <span v-text="n">1</span>
                                                </button>
                                                <button class="page-item page-link btn" href="#"
                                                    @click.prevent="loadEvents(pageInfo.nextPage)"
                                                    style="font-size: 30px">
                                                    下一页
                                                </button>
                                            </div>
                                        </nav>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>

        <footer class="footer" style="text-align: center;">Copyright &copy; 2021.Vivid World Service Company
        </footer>
    </div>
    </div>

    <!-- All Jquery -->
    <script src="../assets/plugins/jquery/jquery.min.js"></script>
    <!-- Bootstrap tether Core JavaScript -->
    <script src="../assets/plugins/bootstrap/js/popper.min.js"></script>
    <script src="../assets/plugins/bootstrap/js/bootstrap.min.js"></script>
    <!-- slimscrollbar scrollbar JavaScript -->
    <script src="js/perfect-scrollbar.jquery.min.js"></script>
    <!--Wave Effects -->
    <script src="js/waves.js"></script>
    <!--Menu sidebar -->
    <script src="js/sidebarmenu.js"></script>
    <!--Custom JavaScript -->
    <script src="js/custom.min.js"></script>
    <!--[if lt IE 9]>
<script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
<script src="http://cdn.staticfile.org/modernizr/2.8.3/modernizr.js"></script>
<script src="assets/js/polyfill/rem.min.js"></script>
<script src="assets/js/polyfill/respond.min.js"></script>
<script src="assets/js/amazeui.legacy.js"></script>
<![endif]-->

    <!--[if (gte IE 9)|!(IE)]><!-->
    <script src="assets/js/amazeui.min.js"></script>
    <!--<![endif]-->

    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    <!--引入数据加载相关的js文件-->
    <script src="js/BGOshuju.js"></script>
    <!--引入表格加载相关的js文件-->
    <script src="js/BGOevent.js"></script>
</body>

</html>